import React, { PureComponent } from 'react';
import { Button, Form, Select } from 'antd';
import './index.less';

class SingleSelect extends PureComponent {
  static defaultProps = {
    options: [],
  };

  handleSelect = v => {
    const { onChange } = this.props;
    onChange(v?.length > 0 ? [v.pop()] : v);
  };

  render() {
    const { options, value, onChange, ...rest } = this.props;
    return (
      <Select
        value={value}
        mode="tags"
        onChange={this.handleSelect}
        {...rest}
        className="single-select-wrap"
      >
        {options.map(({ label, value }) => (
          <Select.Option key={value.toString()}>{label}</Select.Option>
        ))}
      </Select>
    );
  }
}

const options = [
  { label: '吃', value: 'eat' },
  { label: '喝', value: 'drink' },
  { label: '玩', value: 'play' },
];
export default function ExampleWithSingleSelect() {
  const [form] = Form.useForm();

  const submit = () => {
    const values = form.getFieldsValue();
    console.log('🚀 ~ file: ExampleWithSingleSelect.jsx:29 ~ submit ~ values:', values);
  };
  return (
    <div>
      <Form form={form}>
        <Form.Item label="自定义下拉选项" name="hobby">
          <SingleSelect options={options} allowClear />
        </Form.Item>
        <Button onClick={submit}>提交</Button>
      </Form>
    </div>
  );
}
